<template>
  <div class="form">
    <el-form :model="info"
             ref="ruleForm"
             :rules="rules">
      <el-form-item label="账号:"
                    label-width="70px"
                    prop="account">
        <el-input v-model="info.account"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="名称:"
                    label-width="70px"
                    prop="name">
        <el-input v-model="info.name"
                  autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <div>
      <p v-for="item in menu"
         :key="item.menuId">
        <span> {{item.menuName}}</span>
        <el-switch v-model="item.accessStatus"
                   active-color="#13ce66"
                   inactive-color="#ff4949">
        </el-switch>
        正常
      </p>
    </div>
    <el-button type="primary"
               @click="save">保存</el-button>
  </div>
</template>
<script>
import { updateAdminInfo, updateMenu } from "@/api/admin";
export default {
  props: {
    id: Number,
    menu: Array,
    info: Object
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
        ],
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    valid(formName) {
      let isValid;
      this.$refs[formName].validate(vaild => {
        isValid = vaild;
      });
      return isValid;
    },
    async save() {
      const isValid = this.valid("ruleForm");
      if (!isValid) {
        this.$message({
          message: "请填写正确的信息",
          type: "error",
          center: true
        });
        return;
      }
      await updateAdminInfo(this.id, this.info);
      this.$message({
        message: "编辑成功",
        center: true,
        type: "success"
      });
      const menuIds = this.menu
        .filter(_ => _.accessStatus === true)
        .map(_ => _.menuId)
        .join(",");
      await updateMenu(this.id, { menuIds });
      this.$message({
        message: "编辑成功",
        center: true,
        type: "success"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  width: 420px;
}
</style>


